<script setup>
import { ref , onMounted, watch } from 'vue'
import { useRoute } from 'vue-router' // 导入 useRoute
import axios from '../plugins/axios' // 引入 axios 实例
const route = useRoute() // 获取路由对象
const isTop = route.params.id || 0 // 获取路由参数 id，如果不存在则默认为 0

console.log('路由参数 id:', route.params.id) // 调试信息
console.log('isTop 的值:', isTop) // 调试信息

const searchForm = ref({
  siteId: '',
  keyword: '',
  author: '',
  startTime: '',
  endTime: '',
  currentPage: 1,
  pageSize: 10
})

const authors = ref([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
])

const emit = defineEmits(['search'])
const sites = ref([]) // 添加站点列表数据

// 获取站点列表
const fetchSites = async () => {
  try {
    const userId = localStorage.getItem('userId')
    const response = await axios.get(`/site/findSiteByUserId/${userId}`)
    sites.value = response.data.data
    if (sites.value && sites.value.length > 0) {
      searchForm.value.siteId = sites.value[0].id
      handleSearch()
    }
  } catch (error) {
    console.error('获取站点列表失败:', error)
  }
}

const handleSearch = () => {
  emit('search', { ...searchForm.value })
}

const handleReset = () => {
  searchForm.value = {
    siteId: '',
    keyword: '',
    author: '',
    startTime: '',
    endTime: '',
    currentPage: 1,
    pageSize: 10
  }
  handleSearch()
}

const handlePageChange = (page) => {
  searchForm.value.currentPage = page
  handleSearch()
}
// 组件挂载时获取站点列表
onMounted(() => {
  fetchSites()
})
// 监听 siteId 的变化
watch(() => searchForm.value.siteId, (newVal) => {
  if (newVal) {
    handleSearch()
  }
})
</script>

<template>
  <h2 class="announcement-title">{{ isTop == 0 ? "置顶公告" : "实时公告" }}</h2>
  <div class="search-container">
    <div class="search-form">
      <div class="form-group">
        <div class="form-item">
          <label>站点：</label>
          <select v-model="searchForm.siteId" class="form-control">
            <option 
              v-for="site in sites" 
              :key="site.id" 
              :value="site.id"
            >
              {{ site.siteName }}
            </option>
          </select>
        </div>
        <div class="form-item">
          <label>关键字：</label>
          <input 
            type="text" 
            v-model="searchForm.keyword" 
            placeholder="搜索标题和内容"
            class="form-control"
          >
        </div>
        <div class="form-item">
          <label>作者：</label>
          <input 
            type="text" 
            v-model="searchForm.author" 
            placeholder="请输入作者名称"
            class="form-control"
          >
        </div>
      </div>

      <div class="form-group">
        <div class="form-item">
          <label>开始时间：</label>
          <input 
            type="date" 
            v-model="searchForm.startTime"
            class="form-control"
          >
        </div>
        <div class="form-item">
          <label>结束时间：</label>
          <input 
            type="date" 
            v-model="searchForm.endTime"
            class="form-control"
          >
        </div>
        <div class="form-item">
          <label class="invisible">操作</label>
          <div class="button-group">
            <button @click="handleSearch" class="btn btn-primary">搜索</button>
            <button @click="handleReset" class="btn btn-default">重置</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.announcement-title {
  margin: 20px 0;
  line-height: 1.2;  /* 进一步降低行高 */
  text-align: center;
  font-size: 24px;
  color: #2c3e50;
  padding: 12px 0;
}
/* 容器保持原有尺寸 */
.search-container {
  width: 96%;  /* 微调为百分比宽度 */
  margin: 20px auto;
  padding: 24px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border-radius: 8px;
}

/* 表单区域扩展填充 */
.search-form {
  width: 100%;
  box-sizing: border-box;
}

/* 精确控制表单项 */
.form-group {
  display: flex;
  gap: 16px;
}

.form-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-item label {
  font-size: 13px;
  color: #606266;
}

.invisible {
  visibility: hidden;
}

.form-control {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  transition: border-color 0.2s;
}

.form-control:focus {
  border-color: #409eff;
  outline: none;
}

.button-group {
  display: flex;
  gap: 8px;
  height: 32px;
}

.btn {
  padding: 0 16px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #409eff;
  border: 1px solid #409eff;
  color: white;
}

.btn-primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.btn-default {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.btn-default:hover {
  color: #409eff;
  border-color: #409eff;
}

@media (max-width: 768px) {
  .form-group {
    flex-direction: column;
  }
}
</style>